<template>
  <div class="app-container" style="position: relative">
    <top-title :content="content" :updateTime="false"></top-title>
    <div class="add-btn cursor" @click="addEditHandle({})">新增</div>
    <div class="switch-group flex">
      <div
        v-for="item in btnList"
        :key="item.id"
        :class="active == item.id ? 'active' : 'none'"
        class="switch"
        @click="getExamineDetailePage(item.id)"
      >
        {{ item.name }}
      </div>
    </div>

    <div style="margin-top: 20px; height: 720px; overflow-y: auto">
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        class="tableList"
        rowKey="id"
        @change="handleTableChange"
      >
        <template slot="title" slot-scope="records">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ records.title }} </span>
            </template>
            <span>{{ records.title }} </span>
          </a-tooltip>
        </template>
        <template slot="action" slot-scope="records">
          <span class="operation deatil-color" @click="addEditHandle(records)">编辑</span>
          <span class="operation warnColor" @click="showDelete(records)">删除</span>
        </template>

        <template slot="drag" slot-scope="">
          <span class="cursor"><img alt="" src="@/assets/imgs/drag.png" /></span>
        </template>
      </a-table>
    </div>
    <add-check ref="addCheck" @refresh="handelRefresh"></add-check>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import topTitle from '@/components/topTitle'
import addCheck from './modules/addCheck'
import allMessage from '@/components/allMessage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, getAction, postAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
import { examineDetailCategoryDelete } from '@/api/industry'
export default {
  name: '',
  components: { topTitle, addCheck, allMessage },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['检查内容'], ['检查项']],
      url: {
        list: '/industry/examine_category/list',
      },
      btnList: [],
      publicVisible: false,
      disableMixinCreated: true,
      active: undefined,
      industryExamineCategoryId: '',
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '检查项',
          dataIndex: 'industryExamineDetailName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '添加人',
          dataIndex: 'createBy',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '拖拽',
          scopedSlots: { customRender: 'drag' },
          ellipsis: true,
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    this.setSort()
    if (this.$route.query.params && this.$route.query.params.constructor === Object) {
      let params = this.$route.query.params
      localStorage.setItem('industryExamineId', JSON.stringify(params)) // 持久化储存 刷新使用
      this.queryParam.industryExamineId = params.id
      this.getBtnList()
    } else {
      let params = JSON.parse(localStorage.getItem('industryExamineId'))
      this.queryParam.industryExamineId = params.id
      this.getBtnList()
    }
  },
  methods: {
    async getBtnList() {
      let { result } = await getAction('/industry/examine_category/list', this.queryParam)
      this.btnList = result
      await this.getExamineDetailePage(this.btnList[0].id)
    },

    async getExamineDetailePage(id) {
      this.industryExamineCategoryId = id
      let {
        result: { records },
      } = await getAction('/industry/examine_detail/page', {
        industryExamineCategoryId: id,
        pageSize: 99999,
        order: 'asc',
        column: 'sortOrder',
      })
      this.dataSource = records
      this.active = id
    },

    addEditHandle(records) {
      records.btnList = this.btnList
      records.industryExamineCategoryId = this.active
      records.industryExamineId = this.queryParam.industryExamineId
      this.$refs.addCheck.show(records)
    },

    handelRefresh() {
      this.getExamineDetailePage(this.active)
    },

    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      examineDetailCategoryDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.getExamineDetailePage(this.active)
      })
    },

    setSort() {
      const tbody = document.querySelector('.ant-table-tbody')
      this.sort = Sortable.create(tbody, {
        filter: '.filtered',
        ghostClass: 'sortable-ghost',
        onEnd: (evt) => {
          console.log(evt.oldIndex, evt.newIndex, evt.item.dataset.rowKey)
          if (evt.newIndex !== evt.oldIndex) {
            const targetRow = this.dataSource.splice(evt.oldIndex, 1)[0]
            this.dataSource.splice(evt.newIndex, 0, targetRow)
            postAction('/industry/examine_detail/drag_change', {
              industryExamineCategoryId: this.active,
              dragNo: evt.oldIndex + 1,
              byNo: evt.newIndex + 1,
            }).then((res) => {
              this.$message.success(res.message)
              // this.getExamineDetailePage(this.active)
            })
          }
        },
      })
    },
  },
  destroy() {},
}
</script>
<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #0f579f !important;
}
</style>
<style lang="less" scoped>
.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;

  .switch-group {
    .switch {
      width: 200px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: var(--theme-content-item-bg);
      border: 0.01rem solid var(--theme-input-border);
      font-size: 0.16rem;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #509eee;
      cursor: pointer;
    }

    .active {
      background: #1388ff;
      font-weight: bold;
      color: #0b3f73;
    }
  }
}
</style>
